<template>
    <div class="user-container">
        <div class="query-form">
            <query-form :form="userFormOpt" v-model="userForm" @queryHandler="queryHandler"/>
<!--            <el-form :inline="true" :model="userForm" ref="queryFormRef">-->
<!--                <el-form-item label="用户名" prop="username">-->
<!--                    <el-input v-model="userForm.username" placeholder="请输入用户名" />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="用户状态" prop="status">-->
<!--                    <el-select v-model="userForm.status" placeholder="请选择">-->
<!--                        <el-option :label="item.label" :value="item.value" v-for="(item, index) in queryOptions" :key="'options'+index" />-->
<!--&lt;!&ndash;                        <el-option label="Zone two" value="beijing" />&ndash;&gt;-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                    <el-button type="primary" @click="queryHandler">查询</el-button>-->
<!--                    <el-button type="primary" plain @click="resetQueryHandler(queryFormRef)" >重置</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
        </div>
<!--        <div class="base-table">-->
<!--            <div class="action">-->
<!--                <el-button type="primary" @click="addHandler" v-auth="'user-create'">新增</el-button>-->
<!--                <el-button type="danger" @click="bulkDeleteHandler" v-auth="'user-delete'">批量删除</el-button>-->
<!--            </div>-->
<!--            <el-table-->
<!--                    :data="tableData"-->
<!--                    style="width: 100%"-->
<!--                    @selection-change="selectionChangeHandler"-->
<!--            >-->
<!--                <el-table-column type="selection" width="55" />-->
<!--                <el-table-column-->
<!--                        :prop="item.prop"-->
<!--                        :label="item.label"-->
<!--                        :width="item.width"-->
<!--                        :formatter="item.formatter"-->
<!--                        v-for="(item, index) in columns"-->
<!--                        :key="item.prop"/>-->
<!--                <el-table-column fixed="right" label="操作" width="150">-->
<!--                    <template #default="scope">-->
<!--&lt;!&ndash;                        <el-button type="default" size="small" @click="editHandler(scope.row)" v-auth="'user-edit'">编辑</el-button>&ndash;&gt;-->
<!--                        <el-button type="default" size="small" @click="editHandler(scope.row)">编辑</el-button>-->
<!--                        <el-popconfirm title="确定删除吗?" @confirm="deleteHandler(scope.row)">-->
<!--                            <template #reference>-->
<!--                                <el-button type="danger" size="small" v-auth="'user-delete'">删除</el-button>-->
<!--                            </template>-->
<!--                        </el-popconfirm>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </el-table>-->
<!--            <div class="pagination">-->
<!--                <el-pagination-->
<!--                        background-->
<!--                        layout="total, prev, pager, next"-->
<!--                        :total="pager.total"-->
<!--                        @current-change="pageChangeHandler"-->
<!--                />-->
<!--            </div>-->
<!--        </div>-->
        <base-table :data="tableData"
                    :columns="columns"
                    :pager="pager"
                    @selection-change="selectionChangeHandler"
                    @deleteHandler="deleteHandler"
                    @editHandler="editHandler"
                    @pageChangeHandler="pageChangeHandler"
        >
                    <template #action>
                        <el-button type="primary" @click="addHandler" v-auth="'user-create'">新增</el-button>
                        <el-button type="danger" @click="bulkDeleteHandler" v-auth="'user-delete'">批量删除</el-button>
                    </template>
<!--                    <template #controls="scope">-->
<!--                        <el-button type="warning" @click="testHandler(scope.data)" size="small">测试</el-button>-->
<!--                    </template>-->
        </base-table>
        <user-dialog ref="userDialogRef" @submit="getUserList"></user-dialog>
    </div>
</template>

<script setup name="UserView">
   import dayjs from 'dayjs'
   import UserDialog from './dialogs/UserDialog.vue'


   const { proxy } = getCurrentInstance()

   // const testHandler = (data) => {
   //     console.log(data)
   // }
   // 查询部分
   const userFormOpt = [
       {
           type: 'input',
           label: '用户名',
           model: 'username',
           placeholder: '请输入用户名',
           // disabled: true
       },
       {
           type: 'select',
           label: '用户状态',
           model: 'status',
           placeholder: '请选择用户状态',
           options: [
               {value: 0, label: '所有'},
               {value: 1, label: '在职'},
               {value: 2, label: '离职', disabled: true},
               {value: 3, label: '试用期'}
           ]
       },
   ]
   const userForm = ref({
       username: '',
       status: 0,
   })

   const queryFormRef = ref()
   const queryOptions = ref([
       {value: 0, label: '所有'},
       {value: 1, label: '在职'},
       {value: 2, label: '离职'},
       {value: 3, label: '试用期'}
   ])
    function queryHandler(values) {
        console.log(values)
        console.log(userForm.value)
       getUserList()
    }
   function resetQueryHandler(formEl) {
       console.log('reset')
       console.log(formEl)
       if (!formEl) return
       formEl.resetFields()
   }
   onMounted(() => {
       getUserList()
   })
   // Table部分
    const tableData = ref([])
    const columns = ref([
        { type: 'selection' },
        {prop: 'userId', label: '用户ID'},
        {prop: 'userName', label: '用户名'},
        {prop: 'userEmail', label: '用户邮箱'},
        {prop: 'role', label: '用户角色', formatter:(row, column, value)=>{
            return {
                0: '管理员',
                1: '普通用户'
            }[value]
        }},
        {prop: 'state', label: '用户状态', formatter:(row, column, value)=>{
                return {
                    1: '在职',
                    2: '离职',
                    3: '试用期',
                }[value]
        }},
        {prop: 'createTime', label: '创建时间', formatter:(row, column, value)=>{
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
        }},
        {prop: 'lastLoginTime', label: '最后登录时间', formatter:(row, column, value)=>{
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
        }},
        {
            type: 'controls',
            label: '操作',
            width: 150,
            list: ['edit', 'delete']
        }
    ])
    const multipleSelection = ref([])
    const pager = ref({
        pageNum: 1,
        pageSize: 2,
        total: 0
    })

    const getUserList = async () => {
        const params = {
            ...userForm,
            ...pager.value
        }
        const result = await proxy.$api.getUserList(params)
        // console.log(result)
        pager.value = result.page
        tableData.value = result.list
    }
    const  addHandler = () => {
        // console.log('add')
        proxy.$refs.userDialogRef.addAction()
    }
    const editHandler = (item) => {
        proxy.$refs.userDialogRef.editAction(item)
        // console.log('edit')
    }
    const selectionChangeHandler = (value)=>{
        multipleSelection.value = value
        console.log(multipleSelection)
    }
    const pageChangeHandler = (page) => {
        pager.value.pageNum = page
        getUserList()
    }
    // 单独删除
    const deleteHandler = async (row) => {
        // console.log(row)
        const res = await proxy.$api.userDelete({userIds: [row.userId]})
        if (res.nModified > 0) {
            proxy.$message.success('删除成功')
            getUserList()
        }
    }
    // 批量删除
   const bulkDeleteHandler = async () => {
       console.log('delete bulk')
       console.log(multipleSelection.value)
       console.log(multipleSelection.value.length)
       const deleteIds = multipleSelection.value.map(item => {
           return item.userId
       })
       if (multipleSelection.value.length <= 0) {
           return  proxy.$message.error('请选择要删除的用户')
       }
       const res = await proxy.$api.userDelete({userIds: deleteIds})
       if (res.nModified > 0) {
           proxy.$message.success('删除成功')
           getUserList()
       }
   }
</script>
<style scoped lang="scss">
.user-container{

}
</style>
